<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function loadImg(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = function() {
                    resolve(img);
                }
                img.onerror = function() {
                    reject(new Error('Could not load img at' + url))
                }
                img.src = url
            })
        }
        // loadImg('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cc10c15d99047398130ebd19504adac~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?')
        //     .then(img => {
        //         document.body.appendChild(img)
        //     })
            const urls = [
                'https://img.36krcdn.com/20220819/v2_4cdc578821be4da69ba9428ce7168c22_img_jpg',
                'https://img.36krcdn.com/20220819/v2_72fca4c86f3f49cea9269b8a807cb5d7_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_5ccd624049fc42a8850809af34608204_img_000?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220811/v2_9254cffc195b4f4782e28fa34a019a4e_img_jpg',
                'https://img.36krcdn.com/20220819/v2_3bb8f0a7f25643f3955904ec4415f6ff_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220812/v2_db135c2ba3b34f9f9138ca6bcce132fb_img_jpg',
                'https://img.36krcdn.com/20220819/v2_f9016b4a81d6487185947921d77585cb_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_16cd9e64866342278ead4fb7b180fbad_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_4df492bfcdb84638a22c1cddd09acc60_img_jpeg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_ac3cbab297f2459381c0898742515544_img_jpeg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_19a316bd8b9c4bcb8988888ade91602c_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center',
                'https://img.36krcdn.com/20220819/v2_adfe0afe1ab948aaaa6862429f81a1cc_img_jpg',
                'https://img.36krcdn.com/20220819/v2_bcda089f23ac43aaaa0395b7f214c3bb_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center'
            ]
            // promise limit 限流
        function limitLoad(urls, handler, limit) {
            let sequence = [].concat(urls); // 数据解决方案
            // console.log(sequence)
            let promises = sequence.splice(0, limit).map((url, index) => {
                return handler(url).then(() => {
                    return index; // Promise.resolve(index)
                }) 
            })
            // console.log(promises)
            return sequence
                .reduce((pCollect, url) => {
                    // 每个promise
                    return pCollect.then(() => {
                        return Promise.race(promises)
                    })
                    .then(fastestIndex => {
                        promises[fastestIndex] = handler(url).then(
                            () => {
                                return fastestIndex
                            }
                        )
                    })
                    .catch(err => {
                        console.log(err)
                    })
                }, Promise.resolve())
                .then(() => {
                    return Promise.all(promises)
                })
        }
        limitLoad(urls, loadImg, 3)
            .then(res => {
                console.log('图片全部加载完成')
            })
            .catch(err => {
                console.error(err)
            })
    </script>
</body>
</html>